<template>
	<div>
		<van-field
			v-model="localStart"
			label="开始日期"
			placeholder="请选择开始日期"
			is-link
            :required="required"
			readonly
            :rules="rules"
			@click="showStartPicker = true"
		/>
		<van-field
			v-model="localEnd"
			label="截止日期"
			placeholder="请选择截止日期"
			is-link
            :required="required"
			readonly
            :rules="rules"
			@click="showEndPicker = true"
		/>

		<van-popup v-model="showStartPicker" position="bottom">
			<van-datetime-picker
				v-model="startDate"
				type="date"
				title="开始日期"
				:max-date="maxStartDate"
				@confirm="onStartConfirm"
				@cancel="showStartPicker = false"
			/>
		</van-popup>

		<van-popup v-model="showEndPicker" position="bottom">
			<van-datetime-picker
				v-model="endDate"
				type="date"
				title="截止日期"
				:min-date="minEndDate"
				@confirm="onEndConfirm"
				@cancel="showEndPicker = false"
			/>
		</van-popup>
	</div>
</template>

<script>
import { DatetimePicker } from 'vant'
import dayjs from 'dayjs'

export default {
	name: 'DateRangePicker',
	components: {
		'van-datetime-picker': DatetimePicker
	},
	props: {
        required: {
			type: Boolean,
			default: true
		},
        rules: {
			type: Array,
			default() {
				return [{ required: true }]
			}
		},
		start: {
			type: String,
			default: ''
		},
		end: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			showStartPicker: false,
			showEndPicker: false,
			localStart: this.start,
			localEnd: this.end,
			startDate: this.start ? new Date(this.start) : new Date(),
			endDate: this.end ? new Date(this.end) : new Date(),
			maxStartDate: this.end ? new Date(this.end) : new Date(),
			minEndDate: this.start ? new Date(this.start) : new Date(dayjs().subtract(10, 'y'))
		}
	},
	watch: {
		start(newValue) {
			this.localStart = newValue
			this.startDate = newValue ? new Date(newValue) : new Date()
			this.minEndDate = newValue ? new Date(newValue) : new Date(dayjs().subtract(10, 'y'))
		},
		end(newValue) {
			this.localEnd = newValue
			this.endDate = newValue ? new Date(newValue) : new Date()
			this.maxStartDate = newValue ? new Date(newValue) : new Date()
		},
		localStart(newValue) {
			this.$emit('update:start', newValue)
		},
		localEnd(newValue) {
			this.$emit('update:end', newValue)
		}
	},
	methods: {
		onStartConfirm(date) {
			const formattedDate = dayjs(date).format('YYYY-MM-DD')
			this.localStart = formattedDate
			this.startDate = new Date(formattedDate)
			this.minEndDate = new Date(formattedDate)
			if (this.localEnd && dayjs(formattedDate).isAfter(dayjs(this.localEnd))) {
				this.localEnd = formattedDate
				this.endDate = new Date(formattedDate)
			}
			this.showStartPicker = false
		},
		onEndConfirm(date) {
			const formattedDate = dayjs(date).format('YYYY-MM-DD')
			this.localEnd = formattedDate
			this.endDate = new Date(formattedDate)
			this.maxStartDate = new Date(formattedDate)
			if (this.localStart && dayjs(formattedDate).isBefore(dayjs(this.localStart))) {
				this.localStart = formattedDate
				this.startDate = new Date(formattedDate)
			}
			this.showEndPicker = false
		}
	}
}
</script>

<style>
/* 可以在这里添加一些自定义样式 */
</style>
